<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="{{CDN}}/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="{{CDN}}/easyui/themes/icon.css">
		<script type="text/javascript" src="{{CDN}}/easyui/jquery.min.js"></script>
		<script type="text/javascript" src="{{CDN}}/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="{{CDN}}/easyui/locale/easyui-lang-zh_CN.js"></script>
		<script>

        //当前选中省份
        var selectRow = null;
		$(function(){
			$("#province_grid").datagrid({
				singleSelect:true,
				fit:true,
				fitColumns:true,
				collapsible:true, 
				//width:'auto',
				striped:true,
				rownumbers:true, 
			    columns:[[    
			    	{field:'CK',checkbox:true},
			        {field:'province_code',title:'省份编码',width:150,align:'center'}, 
			        {field:'province_name',title:'省份名称',width:100,align:'center'}
			    ]],
			    url:'/commonDict/area/getProvinceList',
                //左侧表格选中一行触发
                onClickRow:function(rowIndex, row){
                    selectRow= row;
                    $("#city_grid").datagrid({
                        singleSelect:true,
                        title:row.province_name+"城市列表",
                        fit:true,
                        fitColumns:true,
                        collapsible:true,
                        striped:true,
                        rownumbers:true,
                        columns:[[    
                            {field:'CK',checkbox:true},
                            {field:'city_code',title:'城市编码',width:150,align:'center'}, 
                            {field:'city_name',title:'城市名称',width:100,align:'center'}
                        ]],
                        url:'/commonDict/area/getCityList',
                        queryParams:{province_id:row.province_id}
                    });
                }
			});



            //新增城市
            $("#add_city").click(function(){
				$("#dialog").dialog({ 
                    title: '新增',    
                    width: 800,    
                    height: 220,    
                    closed: false,    
                    cache: false,
                    modal: true,
                    buttons:[{
                        text:'保存',
                        iconCls:'icon-save',
                        handler:function(){
                            $.post("/commonDict/area/insertCity",{
                                province_id:selectRow.province_id,
                                city_code:$("#city_code").textbox("getValue"),
                                city_name:$("#city_name").textbox("getValue")
                            },function(response){
                                $("#dialog").dialog('close');
                                $("#city_grid").datagrid('reload');
                            })
                        }
                    }]
                });
			});

            //修改城市
            $("#edit_city").click(function(){
                var rows = $('#city_grid').datagrid('getSelections');
                if(rows.length<1){
                    $.messager.alert('提示','请勾选一条');
                    return false;
                }
                $("#city_code").textbox("setValue",rows[0].city_code);
				$("#city_name").textbox("setValue",rows[0].city_name);
				$("#dialog").dialog({ 
                    title: '修改',    
                    width: 800,    
                    height: 220,    
                    closed: false,    
                    cache: false,
                    modal: true,
                    buttons:[{
                        text:'保存',
                        iconCls:'icon-save',
                        handler:function(){
                            $.post("/commonDict/area/updateCity",{
                                city_id:selectRow.city_id,
                                city_code:$("#city_code").textbox("getValue"),
                                city_name:$("#city_name").textbox("getValue")
                            },function(response){
                                $("#dialog").dialog('close');
                                $("#city_grid").datagrid('reload');
                            })
                        }
                    }]
                });
			});
		});
		</script>
	</head>
	<body class="easyui-layout">
		
		<div region="west" border="false" width="50%" title="省">
			<table id="province_grid" ></table>  
        </div>
        

		<div region="center" border="false" width="50%" title="地级市">
			<table id="city_grid" data-options="toolbar:'#toolbar_city'">
                <div id ="toolbar_city">
			        <a href="#" id='add_city' class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增</a>
			        <a href="#" id='edit_city' class="easyui-linkbutton" data-options="iconCls:'icon-edit'">编辑</a>
                </div>
            </table>  
        </div>
        

        <div style="display:none" id="dialog">
            <table width="100%">
                </tr>
                    <td align="right" width="20%">城市编码:</td>
                    <td width="20%"  align="left">
                        <select class="easyui-textbox" id = "city_code"  name="city_code" style="width:400px">
                    </td>
                    <td width="20%" ></td>
                </tr>
                </tr>
                    <td align="right" width="20%">城市名称:</td>
                    <td width="20%"  align="left">
                        <select class="easyui-textbox" id = "city_name"  name="city_name" style="width:400px">
                    </td>
                    <td width="20%" ></td>
                </tr>
            </table> 
        </div>

        


    </body>
</html>
